<template>
  <div>
    <el-form>
      <el-form-item label="时间范围">
        <el-time-picker
          is-range
          v-model="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        ></el-time-picker>
        <el-button @click="clicksearch" size="small" :disabled='dis' type="primary"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-card>
      <div id="echartsBox" class="echarts"></div>
    </el-card>
  </div>
</template>

<script>
import { normalizeDate } from "@/utils/utils";
import { ordertotal } from "@/apis/chartsData";
import * as echarts from "echarts";
export default {
  data() {
    return {
      dis:false,
      date: [],
    };
  },
  methods: {
    clicksearch() {
      this.dis=true
      setTimeout(() => {
        this.dis=false
      }, 2000);

      ordertotal({ date: JSON.stringify(this.date) }).then((res) => {
        let xData = res.data.data.map((obj) => obj.orderTime);
        let yData = res.data.data.map((obj) => obj.orderAmount);
        this.myChart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["订单柱", "订单折"],
          },
          xAxis: [
            {
              type: "category",
              data: xData,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "金额",
              min: 0,
              max: 150,
              interval: 50,
              axisLabel: {
                formatter: "￥{value}",
              },
            },
            {
              type: "value",
              name: "金额",
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                formatter: "￥{value}",
              },
            },
          ],
          series: [
            {
              name: "订单柱",
              type: "bar",
              data: yData,
            },
            {
              name: "订单折",
              type: "line",
              data: yData,
            },
          ],
        });
      });
    },
  },
  //时间
  created() {
    let timenum = new Date().getTime() - 1000 * 60 * 60 * 24 * 365 * 3;
    this.date = [normalizeDate(new Date(timenum)), normalizeDate(new Date())];
  },
  // 生命周期
  mounted() {
    this.myChart = echarts.init(document.getElementById("echartsBox"));

    window.addEventListener("resize", this.handchange);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handchange);
  },
};
</script>

<style lang="less" scoped>
.echarts {
  height: 500px;
}
</style>